<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>opencv 鼠标点击事件</title>
    <!-- <script src='https://docs.opencv.org/版本号/opencv.js'></script> -->
    <!-- OpenCV.js 4.5.5 版本 -->
    <!-- <script src='https://docs.opencv.org/4.5.5/opencv.js'></script> -->

    <!-- <script src='./opencv_4.5.5.js' type="module"></script> -->

    <!-- You may want to load opencv.js asynchronously by async attribute in <script> tag. To be notified when opencv.js is ready, you can register a callback to onload attribute. -->
    <script src="./9_def_rune_tool_2/common/utils/my_opencv_fun.js"></script>
    <script async src="./opencv_4.5.5.js" onload="openCvReady()" type="text/javascript"></script>

    <canvas style="display: block; margin-top: 100px;
    margin-left: 100px;" id="imageCanvasInput1" width="100" height="100"></canvas>

    <canvas style="display: none;" id="imageCanvasInput2" width="70" height="70"></canvas>

    <!-- 放大图 -->

    <!-- 绘制轮廓 -->
    <canvas style="display: block;" id="img1" width="100" height="100"></canvas>
    <canvas style="display: block;" id="img2" width="100" height="100"></canvas>
    <canvas style="display: block;" id="img3" width="100" height="100"></canvas>

</head>

<body style="background-color: #260853;">
    <!-- <script type="module">
        import * as cv from './opencv_4.5.5.js';
        console.log(cv);
    </script> -->
    <script>
        // console.log("xxx", window.$mocvf);
        async function openCvReady() {
            // 脚本加载完成
            // console.log(cv);
            // opencv.js 在真正初始化之前加载并触发 onload 事件。为了等到 opencv.js 真正准备好，opencv.js 提供了一个挂机“onRuntimeInitialized”。像这样使用它：

            var src1 = "./9_def_rune_tool_2/imgs/test/bag_rune.png";
            // var src1 = "./9_def_rune_tool_2/imgs/test/bag_rune2.png";
            // var src2 = "./icon.png";
            var src2 = "./img3.png";
            await Promise.all([await loadImg(src1).then(img1 => {
                // console.log(img1);
                var canvas1 = document.getElementById('imageCanvasInput1');
                var ctx1 = canvas1.getContext('2d');
                // img1.onload = function () {
                //     ctx1.drawImage(img1, 0, 0);
                // }
                canvas1.width = img1.width;
                canvas1.height = img1.height;
                ctx1.drawImage(img1, 0, 0);


                // var canvas3 = document.getElementById('canvasOutput');
                // canvas3.width = img1.width;
                // canvas3.height = img1.height;
                // var ctx3 = canvas3.getContext('2d');
                // ctx3.drawImage(img1, 0, 0);

                // console.log(12);
            }), await loadImg(src2).then(img2 => {
                // console.log(img2);
                // var canvas2 = document.getElementById('imageCanvasInput2');
                // canvas2.width = img2.width;
                // canvas2.height = img2.height;
                // var ctx2 = canvas2.getContext('2d');
                // ctx2.drawImage(img2, 0, 0);
                // console.log(13);
            })]);

            // console.log(2);
            cv['onRuntimeInitialized'] = () => {
                console.log("xxx");
                // 读取原始图像
                let image = cv.imread("imageCanvasInput1");
                // @link https://blog.csdn.net/hankerbit/article/details/80546584
                // cv.MouseCallback 不支持
                document.getElementById("imageCanvasInput1").addEventListener('click', function (evt) {
                    console.log(evt.offsetX, evt.offsetY);

                    return false;
                }, false)



            }
        }

        function loadImg(url) {
            return new Promise((resolve, reject) => {
                let img = new Image();
                // img.crossOrigin = ''; 
                // img.crossOrigin = 'anonymous';
                // 跨域 直接用live server运行 或者使用webview打开
                img.src = url;
                img.onload = () => {
                    resolve(img);
                };
                img.onerror = reject;
            });
        }
    </script>
</body>

</html>